$(document).ready(function(){
	// Define template by building string
	// Notice the use of single quote and double quote
	Invitesq.newEventTemplate = function() {
		return '' +		
		'<h1>New Event</h1>' +
		'<hr />' +
		'<input type="text" name="event-name" id="event-name" placeholder="Event Name" />' + 
		'<br />' + 
		'<input type="text" name="event-slogan" id="event-slogan" placeholder="A cool slogan (optional)" />' + 
		'<br />' + 
		'<textarea name="event-description" id="event-description" placeholder="A short description (optional)" />' + 
		'<hr />' + 
		'<button class="btn btn-primary" id="create-event-btn">' +
		'<i class="icon-pencil icon-white"></i> Create Event</button>' ;
	};
	
	// Define ThumbView template
	Invitesq.thumbEventTemplate = function(){
		return '' +
		// The header
		'<div class="row-fluid">' +
			'<div class="span6">' +
        		'<h3><%= name %></h3>' +
        		'<h5><%= slogan %> </h5>' +
    		'</div>' +
    	'</div>' +
    	// The content
    	'<div class="row-fluid content">' +
	 		'<div class="content-wrapper">' +
	    		'<div class="span2 content-body">' +
	        		'<a href="#" class="thumbnail"><img src="http://lorempixel.com/380/240/nightlife/" alt=""></a>' +
	        	'</div>' +
	      		//'<div class="span4 content-body">' +
	      		//	'<p> <%= description %></p>' +
	      		//'</div>' +
      			// Comment wrapper 
		      	'<div class="span4 comments-wrapper"">' +
				    '<section class="comments">' +
				    	// Loop through comments
				    	'<% _.each(postList, function(post) { %>'  +
							'<article class="comment">' +
								'<a class="comment-img" href="#non">' +
								'<img src="http://lorempixum.com/50/50/people/7" alt="" width="50" height="50">' +
								'</a>' +
								'<div class="comment-body">' +
									'<div class="text">' +
										'<p><%= post.post %></p>' +
									'</div>' +
								'<p class="attribution">by <a href="#non">Joe Bloggs</a> at 2:23pm, 4th Dec 2012</p>' +
								'</div>' +
							'</article>' +
						'<% }); %>' +		
					'</section>​' +
				'</div>' +
			'</div>' +
    	'</div>' +
    	// The footer
    	'<div class="row-fluid footer">' +
      		'<div class="span6">' +
      			'<p>' + 
      				'<a href="#" class="btn btn btn-success"><span class="icon-join"></span>  Join</a>'  +
      				'<a href="#" class="btn btn-warning"><span class="icon-invite"></span>  Invite</a>' +
      				'<a href="#" class="btn btn-info"><span class="icon-watch"></span>  Watch</a>' + 
      			'</p>' +
      		'</div>' +
  		'</div>' ;
	};
	
	// Initialize global data json
	Invitesq.eventData = Invitesq.eventData || [];
	
	// Define Event global classes - model, collection, view
	Invitesq.EventRouter = Backbone.Router.extend({});
	
	// Event Models and Collections class
	Invitesq.EventModel = Backbone.Model.extend({
		defaults: {
			name: "Event Name",
			slogan: "Slogan",
			is_new: true,
			description: "This is a place holder for the description"
		}
	});
	Invitesq.EventCollection = Backbone.Collection.extend({
		model: Invitesq.EventModel,
	});
	
	// Initialize Event global instance in memory
	Invitesq.eventCollection = new Invitesq.EventCollection();
	Invitesq.eventRouter = new Invitesq.EventRouter({
		routes: {
			"page/:pageId": "page"
		}
	});
	
	// Event Views
	Invitesq.NewEventView = Backbone.View.extend({
		tagName: "div",
		className: "span3",
		
		template: _.template(Invitesq.newEventTemplate()),
		
		initialize: function() {
			_.bindAll(this, 'render', 'createEvent', 'redirectToEvent');
		},
		
		render: function() {
			$(this.el).html(this.template({}));
			return this;
		},
		
		events: {
			"click #create-event-btn": "createEvent"
		},
		
		createEvent: function() {
			newEventModel = new Invitesq.EventModel({
				name: this.$('#event-name').val(),
				slogan: this.$('#event-slogan').val(),
				description: this.$('#event-description').val()
			});
			
			
			// Add event model to collection to trigger change event
			Invitesq.eventData.push(newEventModel.toJSON());
			console.log('create new event ' + JSON.stringify(Invitesq.eventData));
			
			$.post('/api/event/create/', newEventModel.toJSON(), this.redirectToEvent);
		},
		
		redirectToEvent: function(data) {
			data = JSON.parse(data);
			$.fancybox.close();
			Invitesq.eventRouter.navigate("/page/?id=" + data.id);
		}
	});
	
	// Define Event Thumb View
	Invitesq.EventThumbView = Backbone.View.extend({
		tagName: "div",
		className: "span6 event",
		template: _.template(Invitesq.thumbEventTemplate()),
		
		initialize: function() {
			_.bindAll(this,"render");
		},
		
		render: function() {
			$(this.el).html(this.template(this.model.toJSON()));
			return this;
		},
	});
	
	
	
	
});
